<template>
  	<div>
    	<top-nav></top-nav>
    	<div class="app-main">
      		<div class="body">
        		<el-card shadow="always">
          			<div class="user-bio">
						<div class="user-bio-section-header">
							<h2>个人信息</h2>
						</div>
            			<div class="user-bio-section-body">
              				<ul class="list-inline">
								<li class="title">
									<span class="title">账户编号</span>
								</li>
								<li>
									<span class="content">{{userInfo.user_uid}}</span>
								</li>
              				</ul>
              				<ul class="list-inline clear">
								<li class="title" style="float:left;">
									<span class="title">账户昵称</span>
								</li>
								<li style="float:left;" v-if="nicknameChange">
									<el-input style="float: left;width: 300px;" v-model="userInfo.username" placeholder="请输入内容"></el-input>
									<el-button class="cancel-btn" type="warning" size="small" @click="nicknameChange=false">取消</el-button>
								</li>
								<li class="edit" v-if="nicknameChange">
									<el-button @click="updateNickname" type="success" size="small">确定</el-button>
								</li>
								<li v-if="!nicknameChange">
									<span class="content">
                    					{{userInfo.user_name}}
                  					</span>
								</li>
                				<li class="edit" v-if="!nicknameChange">
									<el-button plain type="primary" size="small" @click="nicknameChange=true">修改</el-button>
								</li>
              				</ul>
							<ul class="list-inline clear">
								<li class="title" style="float:left;">
									<span class="title">手机号码</span>
								</li>
								<li>
									<span class="content">
										{{userInfo.user_phone}}
									</span>
								</li>
								<li class="edit" v-if="!nicknameChange">
									<el-button plain type="primary" size="small" @click="phoneFormVisible=true">添加手机号</el-button>
								</li>
							</ul>
							<ul class="list-inline clear">
								<li class="title" style="float:left;">
									<span class="title">电子邮箱</span>
								</li>
								<li style="float:left;" v-if="emailChange">
									<el-input style="float: left;width: 300px;" v-model="userInfo.email" placeholder="请输入电子邮箱"></el-input>
									<el-button class="cancel-btn" type="warning" size="small" @click="emailChange=false">取消</el-button>
								</li>
								<li class="edit" v-if="emailChange">
									<el-button @click="updateEmail" type="success" size="small">确定</el-button>
								</li>
								<li v-if="!emailChange">
									<span class="content">
										{{userInfo.user_email}}
									</span>
								</li>
                				<li class="edit" v-if="!emailChange">
									<el-button plain type="primary" size="small" @click="emailChange=true">修改</el-button>
								</li>
              				</ul>
							<ul class="list-inline">
								<li class="title">
									<span class="title">注册时间</span>
								</li>
								<li>
									<span class="content">{{userInfo.create_time}}</span>
								</li>
              				</ul>
            			</div>
          			</div>
					<div class="user-bio">
            			<div class="user-bio-section-header">
              				<h2>账户信息</h2>
            			</div>
						<div class="user-bio-section-body">
							<ul class="list-inline clear">
								<li class="title" style="float:left;">
									<span class="title">账户余额</span>
								</li>
								<li>
									<span class="content">
                    					￥ {{userInfo.money}}
                  					</span>
								</li>
								<li class="edit" v-if="!nicknameChange">
									<el-button plain type="primary" size="small" @click="retireFormVisible=true">提现</el-button>
									<el-button plain type="primary" size="small" @click="retireListVisible=true">提现记录</el-button>
								</li>
							</ul>
							<ul class="list-inline">
							<li class="title">
								<span class="title">邀请码</span></li>
								<li>
									<span class="content">{{userInfo.invitation_code}}</span>
								</li>
								<li class="edit">
									<el-button type="primary" plain size="small" @click="shareVisible=true">分享</el-button>
								</li>
							</ul>
							<ul class="list-inline clear">
								<li class="title" style="float:left;">
                  					<span class="title">我的推荐人</span>
									<li>
										<span class="content">{{userInfo.recommender||'暂无'}}</span>
									</li>
                				</li>
								<li class="edit">
									<el-button plain type="primary" size="small" @click="inviteVisible=true">添加推荐人</el-button>
								</li>
							</ul>
							<ul class="list-inline clear">
								<li class="title" style="float:left;">
									<span class="title">我的优惠券</span>
								</li>
								<li class="edit">
									<el-button plain type="primary" size="small" @click="couponShow">可用优惠券</el-button>
								</li>
							</ul>
						</div>
					</div>
        		</el-card>
      		</div>
    	</div>
		<!-- 添加手机号 -->
		<el-dialog title="添加手机号" :visible.sync="phoneFormVisible" width="50%">
			<el-form ref="phoneForm" :model="phoneForm" :rules="rules">
				<el-form-item label="手机号" label-width="120px" prop="amount">
					<el-input style="float:left;width:60%;" v-model="phoneForm.phone" autocomplete="off"></el-input>
					<el-button style="margin-left:10px;" type="primary" @click="getCode">发送验证码</el-button>
				</el-form-item>
				<el-form-item label="验证码" label-width="120px" prop="alpay">
					<el-input v-model="phoneForm.verify" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="phoneFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addPhone">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 提现弹窗 -->
		<el-dialog title="提现" :visible.sync="retireFormVisible" width="85%">
			<el-form ref="retireForm" :model="retireForm" :rules="rules">
				<el-form-item label="提现金额" label-width="120px" prop="amount">
					<el-input v-model="retireForm.amount" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="支付宝账号" label-width="120px" prop="alpay">
					<el-input v-model="retireForm.alpay" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="支付宝实名姓名" label-width="120px" prop="realname">
					<el-input v-model="retireForm.realname" autocomplete="off"></el-input>
				</el-form-item>
				<div style="margin-bottom: 10px; margin-left: 50px;">
					<font color="red">提现申请提交后，工作人员每周日会统一打款</font>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="retireFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="retire">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 提现记录 -->
		<el-dialog title="提现记录" :visible.sync="retireListVisible" width="85%">
			<el-table :data="retireList">
				<el-table-column property="amount" label="金额" width="120px"></el-table-column>
				<el-table-column property="alpay" label="支付宝账号" width="120px"></el-table-column>
				<el-table-column property="name" label="姓名" width="120px"></el-table-column>
				<el-table-column property="status" label="状态" width="120px"></el-table-column>
				<el-table-column property="note" label="备注" width="120px"></el-table-column>
				<el-table-column property="time" label="时间" width="120px"></el-table-column>
			</el-table>
		</el-dialog>
		<!-- 分享 -->
		<el-dialog title="分享" :visible.sync="shareVisible" width="45%">
			<p style="margin-left: 10px; margin-right: 10px; font-size: 16px; line-height: 25px;">
      邀请码：ssdma9
      <br><span>邀请链接：http://www.otbisheng.xyz/exam/register/ssdma9</span></p>
			<div class="el-dialog__footer" style="margin-top:20px;">
				<span class="dialog-footer">
					<el-button type="default" size="medium" @click="shareVisible=false">取消</el-button>
					<el-button type="primary" size="medium" @click="copy('ssdma9')">复制邀请码</el-button>
					<el-button type="primary" size="medium" @click="copy('http://www.otbisheng.xyz/exam/register/ssdma9')">复制邀请链接</el-button>
				</span>
			</div>
		</el-dialog>
		<!-- 添加邀请人 -->
		<el-dialog title="请输入邀请码" :visible.sync="inviteVisible" width="50%">
			<el-form ref="retireForm" :model="inviteForm">
				<el-form-item label="邀请码" label-width="80px">
					<el-input v-model="inviteForm.code" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="inviteVisible = false">取 消</el-button>
				<el-button type="primary" @click="addInvite">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 优惠券 -->
		<el-dialog title="优惠券" :visible.sync="couponListVisible" width="50%">
			<div class="coupon">
				<div class="number">
					<el-input v-model="couponNumber"></el-input>
				</div>
				<el-button type="primary" :loading='loading' @click="couponClick">确 定</el-button>
			</div>
			<el-table :data="couponList">
				<el-table-column property="id" label="ID"></el-table-column>
				<el-table-column property="coupon_name" label="名称"></el-table-column>
				<el-table-column property="exptime" label="到期时间"></el-table-column>
				<el-table-column property="is_status" label="当前状态">
					<template slot-scope="scope">
						{{scope.row.is_status==1?'未使用':'已使用'}}
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<input type="text" id="copy_content" style="position:absolute;left:-9999px;">
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
	name: "user-index",
	data:()=>({
		loading:false,
		userInfo:{},
		nicknameChange:false,
		emailChange:false,
		phoneFormVisible:false,
		phoneForm:{
			phone:'',
			verify:''
		},
		retireFormVisible:false, //提现弹窗
		retireListVisible:false, //提现记录弹窗
		shareVisible:false, //分享弹窗
		inviteVisible:false, //邀请码
		couponListVisible:false, //优惠券
		retireForm:{
			amount:'',
			alpay:'',
			realname:''
		},
		couponNumber:'',//
		inviteForm:{
			code:''
		},
		rules: {
			amount: [
					{ required: true, message: '请输入金额', trigger: 'blur' }
			],
			alpay: [
					{ required: true, message: '请输入支付宝账号', trigger: 'blur' }
			],
			realname: [
					{ required: true, message: '请输入支付宝实名姓名', trigger: 'blur' }
			]
		},
		retireList:[{id:1,alpay:'阿斯顿马丁',amount:'100.00',name:'张三',status:'已提现',note:'',time:'2020-12-05'}],
		couponList:[],
	}),
	methods:{
		// 
		couponShow(){
			this.couponListVisible = true
			this.getCoupon()
		},
		//点击领取优惠券
		async couponClick(){
			if (this.couponNumber) {
				this.loading = true
				let {data:{code,data,msg}}=await this.$http.post(this.$api.couponNumList,{
					num:this.couponNumber
				})
				this.loading = false
				if(code==200){
					this.couponNumber=''
					this.$message.success(msg)
					this.getCoupon()
				}
			}else{
				this.$message('请正确输入优惠券码')
			}
		},
		async getUserInfo(){
			let {data:{code,data}}=await this.$http.post(this.$api.userInfo,{})
			if(code==200){
				this.userInfo=data
			}
		},
		async getCoupon(){
      		let{data:{code,data}} = await this.$http.post(this.$api.myCouponList,{})
			if (code == 200) {
				this.couponList=data
			}
    	},
		updateNickname(){
			this.nicknameChange=false
			this.setUserInfo(this.userInfo)
			this.$message.success('修改成功')
		},
		updateEmail(){
			this.emailChange=false
			this.setUserInfo(this.userInfo)
			this.$message.success('修改成功')
		},
		getCode(){
			if(!this.phoneForm.phone){
				this.$message.error('请输入手机号')
				return
			}
		},
		addPhone(){
			if(!this.phoneForm.phone){
				this.$message.error('请输入手机号')
				return
			}
			if(!this.phoneForm.verify){
				this.$message.error('请输入验证码')
				return
			}
			this.phoneFormVisible=false
		},
		retire(){
			this.$refs.retireForm.validate((valid) => {
				console.log(valid)
					if (valid) {
							alert('submit!');
					} else {
							console.log('error submit!!');
							return false;
					}
			});
		},
		//复制文本
		copy(text){
			var inputElement =  document.getElementById("copy_content");
			//给input框赋值
			inputElement.value = text;
			//选中input框的内容
			inputElement.select();
			console.log(inputElement)
			inputElement.setSelectionRange(0, 9999);
			// 执行浏览器复制命令
			document.execCommand("Copy");
			//提示已复制
			this.$message({
				message: '复制成功',
				type: 'success'
			});
			this.shareVisible=false
		},
		addInvite(){
			this.inviteVisible=false
		},
		...mapMutations(['setUserInfo'])
	},
	created(){
		this.getUserInfo()
		this.getCoupon()
	}
};
</script>

<style lang="scss" scoped>
.app-main {
  min-height: calc(100vh - 50px);
  position: relative;
  overflow: hidden;
  margin-top: 45px;
  .body {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    .user-bio {
      margin-top: 1px;
      font-size: 14px;
      color: #606266;
      .user-bio-section-header {
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 1px;
        margin-bottom: 10px;
        font-weight: 700;
        & h2 {
          display: block;
          font-size: 1.5em;
          margin-block-start: 0.83em;
          margin-block-end: 0.83em;
          margin-inline-start: 0px;
          margin-inline-end: 0px;
          font-weight: bold;
        }
      }
      .user-bio-section-body {
        padding-bottom: 1px;
        margin-left: 10px;
        margin-bottom: 10px;
        .list-inline {
          padding-left: 0;
          margin: 14px 0 14px -5px;
          list-style: none;
          height: 40px;
          & li {
            display: inline-block;
						height: 40px;
						line-height: 40px;
            padding-right: 5px;
            padding-left: 5px;
            font-size: 13px;
            &.title {
              width: 100px;
            }
            &.edit {
              float: right;
              margin-right: 60px;
            }
            & span.title {
              padding-left: 4px;
              font-size: 15px;
              font-weight: 700;
              color: #828282;
              line-height: 40px;
            }
            & span.content {
              font-size: 15px;
              color: #1c1c1c;
            }
						.cancel-btn {
							float: left;
              margin-top: 4px;
							margin-left: 10px;
						}
          }
        }
      }
    }
  }
}
</style>
<style>
.list-inline .el-input__inner {
	height: 32px;
	line-height: 32px;
}
.coupon{
	display: flex;
}
.coupon .number{
	width: 30%;
}
</style>
